<template>
  <div>
    <!-- 面包屑导航 -->
    <div class="breadNav" style="margin: 20px 0 20px 20px;">
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }" class="el-icon-s-home">首页</el-breadcrumb-item>
        <el-breadcrumb-item class="el-icon-position" :to="{ path: '/eva' }"><a href="/">评价管理</a></el-breadcrumb-item>
        <el-breadcrumb-item class="el-icon-position">评价列表</el-breadcrumb-item>
        </el-breadcrumb>  
    </div>
    <!-- 按钮切换 -->
    <el-row style="margin:50px 70px;">
      <el-button size="medium" @click="mesList">评价列表</el-button>
      <el-button size="medium" @click="virList">虚拟评价</el-button>
    </el-row>
    <!-- 评价列表 -->
    <div class="x_evalList">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column label="商品" width="180">
          <template slot-scope="scope">
            <!-- <img :src={{scope.row.storeImg}} alt=""> -->
            <span style="margin-left: 10px">{{ scope.row.store }}</span>
          </template>
        </el-table-column>
        <el-table-column label="评价者" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.evalbuyer }}</span>
          </template>
        </el-table-column>
        <el-table-column label="回复状态" width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.responsestate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="评分等级" width="180">
          <template>
            <div class="block">
              <el-rate v-model="value2" :colors="colors">
              </el-rate>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.audit }}</span>
          </template>
        </el-table-column>
        <el-table-column label="评价时间" width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.item }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="140">
          <template slot-scope="scope">
            <el-row>
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
            </el-row>
            <el-button type="text" size="small" @click="verify(scope)">审核</el-button>
            <el-button type="text" size="small" @click="response(scope)">回复</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { evaldelList, getEvalList} from '../../../api'
export default {
  data() {
    return {
      tableData: [],
      // 评分
      value2: null,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
    }
  },
  created() {
    getEvalList().then((res) => {
      console.log(res)
      this.tableData = res.data
    })
  },
  methods: {
    huhu(){
      getEvalList().then((res) => {
      console.log(res)
      this.tableData = res.data
    })
    },
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      console.log(index, row)
      evaldelList(row).then((res) => {
        console.log(res)
        this.huhu()
      })
    },
    virList() {
      this.$router.push('/virtual')
    },
    // 审核
    verify(scope) {
      console.log(scope.row.id);
      this.$router.push({
        path:"/verify",
        name:"verify",
        params:{
          id:scope.row.id
        }
      })
    },
    // 回复
    response(scope) {
      this.$router.push({
        path:"/response",
        name:"response",
        params:{
          id:scope.row.id
        }
      })
    },
    // 操作 编辑
    handleClick(row) {
      console.log(row)
      this.$router.push('/lookUp')
    },
    mesList() {
      this.$router.push('/eva')
    },
   
  },
 
}
</script>

<style lang="scss">
</style>